﻿<!-- 正文开始 -->
<style >
     .layui-table-cell{
         height: auto!important;
         white-space: normal;
     }
</style>

<div class="layui-fluid">
	<div class="layui-card">
		<div class="layui-card-body">
			<div class="layui-form">
				<div class="layui-form-item">
					<div class="layui-inline">
						<button type="button" class="layui-btn" id="btnAddBizIcon"><i class="layui-icon">&#xe67c;</i>添加</button>
					</div>
                    <div class="layui-inline" style="float: right;margin-right: 0px;">
						<div class="layui-inline" style="padding-right: 0px;margin-right: 0px;">
							<label class="layui-form-label w-auto">名称</label>
							<div class="layui-input-inline mr0">
								<input name="name" class="layui-input" type="text" placeholder="请输入名称"/>
							</div>
						</div>
						<div class="layui-inline"
							style="padding-right: 0px; margin-right: 0px;">
							<input id="searchClassifyId" type="text" name="classifyId"   lay-filter="searchClassifyId" autocomplete="off" placeholder="请选择" value="" class="layui-input">
						</div>
						<div class="layui-inline" style="padding-right: 0px;margin-right: 0px;">
							<button class="layui-btn icon-btn" lay-filter="formSubSearchIcon" lay-submit>
								<i class="layui-icon">&#xe615;</i>查询
							</button>
						</div>					
					</div>
				</div>
			</div>
			<table class="layui-table" id="tableIcon" lay-filter="tableIcon"></table>
		</div>
	</div>
</div>

<script type="text/html" id="modelBizIcon">
<div class="layui-card">
	<div class="layui-card-body" style="padding:0px;padding-top: 1px;">
	    <form id="modelBizIconForm" lay-filter="modelBizIconForm" class="layui-form model-form" style="padding-right: 20px;padding-top: 10px;">
			<table class="formTable" style="margin-left: 10px;margin-bottom: 10px;">
				<tr>
					<td>图标类型</td>
					<td colspan="2" style="text-align: left;">
						<input id="classifyId" type="text" name="classifyId"   lay-filter="classifyId" autocomplete="off" placeholder="请选择" value="" class="layui-input">
	                </td>
				</tr>
				<tr class="file">
					<td colspan="3">
						<button type="button" class="layui-btn" id="uploadIconBtn">上传</button>
					</td>
				</tr>
			</table> 
		</form>
	</div>
</div>
</script>

<!-- 表格操作列 -->
<script type="text/html" id="tableBarIcon">
    <a style="padding-top: 2px;height: 25px;margin-bottom: 2px;" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="checkboxTpl">
  <input type="checkbox" name="isPublic" value="{{d.isPublic}}" title="私有" lay-filter="isPublic" {{ d.isPublic == 1 ? 'checked' : '' }}>
</script>

<!-- 表格操作列 -->
<script type="text/html" id="addImgHtml">
<div class="layui-card" style="box-shadow: none;">
    <div class="layui-card-body" style="padding: 5px;">
<div class="layui-upload">
  <button type="button" class="layui-btn" id="test1">上传图片</button>
  <div class="layui-upload-list">
    <img class="layui-upload-img" id="demo1">
    <p id="demoText"></p>
  </div>
</div>  

    </div>
</div>
</script>

<!-- js部分 -->
<script>
layui.extend({
    treeSelect: '/treeSelect/treeSelect'
}).use(['layer', 'form', 'table', 'util', 'admin','upload','zTree','treeSelect'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var admin = layui.admin;
        var config = layui.config;
        var upload = layui.upload;
        // 渲染表格
        form.render('select');
        
        treeSelect.render({
 	        elem: '#searchClassifyId',
 	        data: '#(ctx)/biz/icon/classify/selectTree',
 	        type: 'get',
 	        placeholder: '请选择',
 	        search: true,
 	        click: function(d){
 	        },
 	        success: function (d) {
 	        }
 	    });
        
        var insTb = table.render({
            elem: '#tableIcon',
            url: '#(ctx)/biz/icon/listData',
            page: true,
            cols: [[
                {type: 'numbers'},
                {
                    align: 'center', templet: function (d) {
                    	if(d.url)
                        	return '<img src="#(ctx)'+d.url+'" />';
                        else
                        	return '';
                    }, title: '缩略图', width: 100, unresize: true
                },
                {field: 'name', sort: false, title: '名称'},
                {field: 'classifyName', sort: false, title: '类型'},
                {field: 'width', sort: false, title: '宽度'},
                {field: 'height', sort: false, title: '高度'},
                {field: 'isPublic', title:'是否私有', width:120, templet: '#checkboxTpl', unresize: true},
                {align: 'center', toolbar: '#tableBarIcon',width:120, title: '操作'}
            ]]
        });

     	// 添加
		$('#btnAddBizIcon').click(function () {
			showEditModel();
		});
        
        // 搜索
        form.on('submit(formSubSearchIcon)', function (data) {
            insTb.reload({where: data.field}, 'data');
        });

       	form.on('checkbox(isPublic)', function(obj){
       		var checked = obj.elem.checked;
       		table.on('row(tableIcon)', function(data){
       			if(!obj)return;
       			var url = 'biz/icon/save';
                var formData={}; 
                formData['bizIcon.id']=data.data.id;
                formData['bizIcon.isPublic']=checked?'1':'0';
                layer.load(2);
                admin.req(url,formData, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.message, {icon: 1});
                        insTb.reload({}, 'data');
                    } else {
                        layer.msg(res.message, {icon: 2});
                    }
                    obj = null;
                }, 'get');
       		});
       	});
        
        // 工具条点击事件
        table.on('tool(tableIcon)', function (obj) {	
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'del') { // 删除
                doDel(obj);
            }
        });
       	
       // 显示编辑弹窗
       function showEditModel(data) {
       	  admin.open({
               type: 1,
               title: (data ? '修改' : '添加') + '图标',
               content: $('#modelBizIcon').html(),
               area:'350px',
               offset: '200px',
               shade: 0.3,
               success: function (layero, dIndex) {
                   $(layero).children('.layui-layer-content').css('overflow', 'visible');
                   
                   treeSelect.render({
            	        elem: '#classifyId',
            	        data: '#(ctx)/biz/icon/classify/selectTree',
            	        type: 'get',
            	        placeholder: '请选择',
            	        search: true,
            	        click: function(d){
            	        },
            	        success: function (d) {
            	        }
            	    });
                   
                   
                   upload.render({
                		elem: '#uploadIconBtn',
                		url: '#(ctx)/biz/icon/upload',
                		accept: 'images',
                		before: function(obj) {
                			layer.load();
                			this.data =  {
               					classifyId : function(){
               					console.log(form.val("modelBizIconForm").classifyId);
               				    	return form.val("modelBizIconForm").classifyId;
               				  	}
                			}
                		},
                		done: function(res, index, upload) {
                			layer.closeAll('loading'); //关闭loading
                			if (200 == res.code) {
                				layer.msg(res.message, {
                					icon: 1
                				});
                				layer.close(dIndex);
                				insTb.reload();
                			} else {
                				layer.msg(res.message, {
                					icon: 2
                				});
                			}
                		},
                		error: function(index, upload) {
                			layer.closeAll('loading');
                			layer.msg("上传失败！", {
                				icon: 2
                			});
                		}
                	});
                   	form.render();
               }
           });
       	}
    
    	
        // 删除
        function doDel(obj) {
            layer.confirm('确定要删除“【<span style="color:red;">' + obj.data.name + '</span>】”吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (i) {
                layer.close(i);
                layer.load(2);
                admin.req('biz/icon/delete', {
                    id: obj.data.id
                }, function (res) {
                    layer.closeAll('loading');
                    if (200==res.code) {
                        layer.msg(res.message, {icon: 1});
                        insTb.reload();
                    } else {
                        layer.msg(res.message, {icon: 2});
                    }
                }, 'get');
            });
        }
    });
    

</script>